<template>
  <div>
    <div class="quiz">
      <div class="left" :style="{ width: width.left }">
        <el-tabs class="el-tabs">
          <el-tab-pane>
            <template #label>
              <span class="tab-title" @click="clearDetail">
                <span>题目详情</span>
                <i class="iconfont icon-timu-04"></i>
              </span>
            </template>
            <el-scrollbar class="problem">
              <problemVue :problem="problem"></problemVue>
            </el-scrollbar>
          </el-tab-pane>
          <el-tab-pane v-if="format != 1 && $route.name != 'raceing-quiz'">
            <template #label>
              <span class="tab-title" @click="clearDetail">
                <span>我的提交</span>
                <i class="iconfont icon-htmal5icon23"></i>
              </span>
            </template>
            <el-card class="unLogin" v-show="!$store.oj.isLogin">
              <i class="iconfont icon-jinggao"></i> 请登陆后查看
            </el-card>
            <div class="muSubmit" v-show="$store.oj.isLogin">
              <mySubmitVue
                :height="$store.oj.systemParams.screenHeight * 0.675 + 'px'"
                :pid="$route.params.pid"
              >
              </mySubmitVue>
            </div>
          </el-tab-pane>
          <el-tab-pane v-if="$route.name != 'raceing-quiz'">
            <template #label>
              <span class="tab-title" @click="clearDetail">
                <span>题目讨论</span>
                <i class="iconfont icon-taolun"></i>
              </span>
            </template>
            <div
              class="discuss"
              :style="{
                height: $store.oj.systemParams.screenHeight * 0.675 + 'px',
              }"
            >
              <discussVue
                @changeDetail="isDetail"
                v-if="!showDetail"
              ></discussVue>
              <detailVue
                v-else
                :width="width.left"
                @changeDetail="noDetail"
              ></detailVue>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="right" :style="{ width: width.right }">
        <div class="bar" @mousedown="handlerToChangeWidth">
          <div>·</div>
          <div>·</div>
          <div>·</div>
          <div>·</div>
        </div>
        <el-scrollbar class="complier">
          <compilerVue
            :pid="$route.params.pid"
            :problemType="problem.problemType"
            :languageList="problem.problemLanguageList"
            @allScreen="allScreen"
          ></compilerVue>
        </el-scrollbar>
      </div>
    </div>

    <!-- 倒计时 -->
    <div v-if="$route.name == 'raceing-quiz'">
      <div class="tips" :class="isOpen ? 'open' : 'close'">
        <div class="btn">
          <div class="back" v-if="isOpen" @click="isOpen = !isOpen">
            <i class="iconfont icon-shouqi1-copy"></i>
          </div>
          <div class="back2" v-else @click="isOpen = !isOpen">
            <i class="iconfont icon-shouqi1-copy"></i>
          </div>
        </div>
        <div class="time">
          <span class="countdown" style="font-variant-numeric: tabular-nums">
            <n-countdown :duration="getDuration" :active="active" />
          </span>
          <div class="backbtn">
            <el-tooltip class="box-item" content="返回比赛" placement="bottom">
              <n-button
                class="button"
                type="success"
                strong
                secondary
                round
                size="small"
                @click="backToRace()"
              >
                <i class="iconfont icon-tuichu"></i>
              </n-button>
            </el-tooltip>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import problemVue from "./components/problem.vue";
import compilerVue from "./components/compiler.vue";
import mySubmitVue from "./components/mySubmit.vue";
import discussVue from "@/components/ojComponents/pdiscuss/pdiscuss.vue";
import detailVue from "@/components/ojComponents/pdetail/pdetail.vue";
import { getProblemAPI, getRaceProblemDetailAPI } from "@/api/ojAPI/ojAPI";

export default {
  data() {
    return {
      width: {
        left: "50%",
        right: "50%",
      },
      screenWidth: 0,
      showDetail: false,
      active: false,
      isOpen: true,
      timer: null,
      format: null,
      problem: {
        examples: {
          input: [],
          output: [],
        },
        problemLanguageList: [],
      },
    };
  },
  mounted() {
    this.active = true;
    this.screenWidth = this.$store.oj.systemParams.screenWidth;
    this.initTimer();
    if (this.$route.name == "raceing-quiz") {
      this.format = localStorage.getItem(`${this.$route.params.rid}format`);
    }
    this.getProblem();
  },
  unmounted() {
    this.active = false;
    clearInterval(this.timer);
  },
  components: {
    problemVue,
    discussVue,
    detailVue,
    compilerVue,
    mySubmitVue,
  },
  methods: {
    handlerToChangeWidth(event) {
      document.addEventListener("mousemove", this.handlerToChangeWidth);
      document.addEventListener("mouseup", this.handlerToNotChangeWidth);
      this.width = this.getWidthRate(this.screenWidth, event.clientX);
    },
    handlerToNotChangeWidth() {
      document.removeEventListener("mousemove", this.handlerToChangeWidth);
    },
    getWidthRate(screenWidth, nowWidth) {
      const obj = {
        left: "",
        right: "",
      };
      const num = Number((nowWidth / screenWidth) * 100).toFixed(2);
      if (num <= 20) {
        obj.left = "0%";
        obj.right = "100%";
      } else if (num >= 70) {
        obj.left = "70%";
        obj.right = "30%";
      } else {
        obj.left = num + "%";
        obj.right = 100 - num + "%";
      }
      return obj;
    },
    clearDetail() {
      this.noDetail();
      localStorage.removeItem("discussId");
    },
    isDetail() {
      this.showDetail = true;
      localStorage.setItem("detail", this.showDetail);
    },
    noDetail() {
      this.showDetail = false;
      localStorage.setItem("detail", this.showDetail);
    },
    backToRace() {
      this.$router.push(`/home/racepage/${this.$route.params.rid}/problem`);
    },
    initTimer() {
      if (this.timer) {
        clearInterval(this.timer);
      }
      const allowEntry = sessionStorage.getItem(
        this.$route.params.rid + "AllowEntry"
      );
      this.timer = setInterval(() => {
        const time = sessionStorage.getItem(this.$route.params.rid);
        if (time) {
          const now = Date.now();
          const endTime = new Date(time).getTime();
          if (this.$store.oj.userData.authLevel > 0) {
            clearInterval(this.timer);
            return;
          }
          if (
            now - endTime >= 0 &&
            !this.$store.oj.getPermission.find((item) =>
              item.includes("web:front:watchRace")
            ) &&
            !allowEntry
          ) {
            this.$router.push(`/home/race-detail/${this.$route.params.rid}`);
          }
        }
      }, 1000);
    },
    allScreen() {
      this.width = {
        left: "0%",
        right: "100%",
      };
    },
    //获取题目
    async getProblem() {
      if (this.$route.name == "raceing-quiz") {
        await getRaceProblemDetailAPI(
          this.$route.params.rid,
          this.$route.query.proId
        )
          .then((res) => {
            if (res.data.code === 200) {
              this.problem = res.data.data;
              if (res.data.data.examples != "") {
                const str1 = res.data.data.examples.replaceAll("\r\n", "\\n");
                this.problem.examples = JSON.parse(str1);
              }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        await getProblemAPI(this.$route.params.pid)
          .then((res) => {
            if (res.data.code === 200) {
              setTimeout(() => {
                this.problem = res.data.data;
                if (res.data.data.examples != "") {
                  const str1 = res.data.data.examples.replaceAll("\r\n", "\\n");
                  this.problem.examples = JSON.parse(str1);
                }
              }, 0);
            }
            if (res.data.code === 500) {
              this.$router.go(-1);
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
  },
  computed: {
    getDuration() {
      const time = sessionStorage.getItem(this.$route.params.rid);
      if (time) {
        const now = Date.now();
        const endTime = new Date(time).getTime();
        return endTime - now;
      }
      return 0;
    },
  },
};
</script>

<style lang="less" scoped>
.quiz {
  width: 97%;
  margin: 0 auto;
  padding: 10px;
  background-color: #fff;
  display: flex;
  height: 85vh;

  .left {
    height: 100%;
    overflow: hidden;

    .el-tabs {
      ::v-deep(.is-top) {
        margin: 0;
      }
    }

    .problem {
      height: 80vh;
    }

    .unLogin {
      background-color: rgb(252, 246, 236);
      width: 95%;
      height: 80px;
      margin: 0 auto;
      text-align: center;
      color: rgb(223, 162, 56);
      margin-top: 15px;
    }

    .tab-title {
      text-align: center;
      height: 20px;
    }
  }

  .right {
    height: 100%;
    display: flex;
    user-select: none;

    .bar {
      width: 0.6vw;
      height: 102%;
      background-color: rgb(240, 240, 240);
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      cursor: col-resize;
      justify-content: center;

      div {
        width: 0.6vw;
        text-align: center;
        font-size: 1vw;
      }

      &:active {
        background-color: @lowColor;
      }
    }

    .complier {
      width: 100%;
      height: 100%;
      margin: 0 auto 0 0;
    }
  }
}

.tips {
  width: 250px;
  height: 100px;
  border-radius: 10px 0 0 10px;
  position: fixed;
  z-index: 100;
  top: 15vh;
  display: flex;
  user-select: none;
  filter: drop-shadow(2px 2px 10px rgba(0, 0, 0, 0.2));
  background-color: rgb(241, 249, 235);

  .btn {
    width: 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .back {
      font-size: 16px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      transform: translate(-12px);
      background-color: rgb(179, 212, 179);
      overflow: hidden;
      transition: 0.4s;
      cursor: pointer;

      &:hover {
        transform: translate(-12px) rotate(180deg);
      }
    }

    .back2 {
      font-size: 16px;
      width: 25px;
      height: 25px;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      transform: translate(-12px);
      background-color: rgb(179, 212, 179);
      overflow: hidden;
      transition: 0.3s;
      cursor: pointer;
    }
  }

  .time {
    height: 100%;
    width: 90%;
    display: flex;
    justify-content: left;

    .countdown {
      height: 40px;
      font-size: 24px;
      font-weight: 550;
      padding: 5px 10px;
      border-radius: 10px;
      margin: auto 0;
      color: #555;
      margin: auto 0;
      border: 3px solid grey;
    }

    .backbtn {
      display: flex;
      width: 20%;
      margin: auto auto auto 8px;

      .button {
        margin: auto;
        overflow: hidden;
        transform: rotate(-90deg);
        width: 150%;

        .iconfont {
          transform: rotate(90deg);
          font-size: 24px;
        }
      }
    }
  }
}

.open {
  transition: 0.8s;
  right: 0;
}

.close {
  right: -240px;
  transition: 0.8s;
}

.openBtn {
}

.closeBtn {
}
</style>
